extends ../layout

include ../mixin/form-group

block content
  .wp-right
    != partial('./sidebar/user_info', {user : current_user})
    include ../sidebar/create_topic
  .wp-left
    .panel
      .panel-hd <span class="ico-profile"></span> 用户中心
      .panel-bd 
        #alert.alert.hide
        form#info.form.form-horizontal(action="/user" method="post") 
          +form-group('text','用户名','username', user.username , false, true)
          +form-group('text','邮　箱','email', user.email)
          +form-group('text','个人主页','home', user.home)
          +form-group('text','GitHub','github', user.github)
          +form-group('textarea','个人签名','signature', user.signature)
          +form-btn('primary', 'submit', 'btn', '保存设置', {'data-loading': "保存中……"})
          
    .panel#setavatar
      .panel-hd <span class="ico-image"></span> 设置头像
      .panel-bd.set-avatar
        .photo.photo-big.set-avatar-photo.interval-r: img(src=user.avatar_url || '/images/photo.png' alt=user.username width=150)
        form.set-avatar-from(action="/user/setavatar" enctype="multipart/form-data" method="post")
          input#avatarFile(type="file" name="avatar" accept="image/*")
          button#avatarBtn.btn.btn-primary(type="submit" data-loading="上传中……") 上传头像

    .panel
      .panel-hd <span class="ico-key"></span> 修改密码
      .panel-bd 
        #passAlert.alert.hide
        form#setpass.form.form-horizontal(action="/user/setpass" method="post")
          +form-group('password','当前密码','oldpass', null , true)
          +form-group('password','新密码','newpass', null , true)
          +form-group('password','重复密码','newpass2', null , true)
          +form-btn('primary', 'submit', 'passbtn', '修改密码')

block script
  script
    :uglify
      $(function () {
        var $btn = $('#btn');
        var $alert = $('#alert');
        $('#btn').loadData({
          before: function () {
            $alert.hide();
          },
          success: function (data) {
            if(data.status) {
              showAlert($alert, data.message, 'error');
            } else {
              showAlert($alert, '修改成功！', 'success');
            }
          }
        });

        $('#avatarBtn').click(function(e) { 
          var files = $('#avatarFile')[0].files;
          if(!files.length){
            e.preventDefault();         
            alert('请先选择头像!');
            return false;
          }
          if(!/^image\/*/.test(files[0].type)){
            e.preventDefault();
            alert('你选择的文件必须是图片!');
            return false;
          }

        })

        var $newpass = $('#newpass');
        var $oldpass = $('#oldpass');
        var $newpass2 = $('#newpass2');
        var $passAlert = $('#passAlert');

        $('#passbtn').loadData({
          data: function () {
            return {
              oldpass: $oldpass.val(),
              newpass: $newpass.val()
            }
          },
          before: function () {
            if(!$oldpass.val().trim()) {
              $oldpass.focus();
              showAlert($passAlert, '当前密码不能为空!', 'error');
              return false;
            }

            if(!$newpass.val().trim()) {
              $newpass.focus();
              showAlert($passAlert, '新密码不能为空!', 'error');
              return false;
            }
            if(!$newpass2.val().trim()) {
              $newpass2.focus();
              showAlert($passAlert, '重复密码不能为空!', 'error');
              return false;
            }

            if($newpass.val() != $newpass2.val()){
              showAlert($passAlert, '两次输入密码不一致', 'error');
              return false;
            }
          },
          success: function (data) {
            if(data.status) {
              showAlert($passAlert, data.message, 'error');
            } else {
              showAlert($passAlert, '修改成功！请重新登录！', 'success');
              setTimeout(function () {
                location.href = "/user/login";
              }, 1000)
            }
          }
        })

      });
      /**
      *  显示错误提醒
      */
      function showAlert(id,message,type) {
        if(!(id instanceof jQuery)) 
          id = $(id);

        if(type == 'error') {
          id.removeClass('alert-success')
            .addClass('alert-error')
            .text(message).show();
        } else {
          id.removeClass('alert-error')
            .addClass('alert-success')
            .text(message).show();
        }
      }


              
              